'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  TrendingUp,
  CreditCard,
  Shield,
  Database,
  ArrowRight,
  Clock,
  Zap,
  CheckCircle,
  BarChart3,
} from 'lucide-react';
import { FINANCIAL_SOLUTIONS } from '@/constants';
import { cn } from '@/lib/utils';

/**
 * 金融应用场景卡片展示组件
 * 展示CActor在金融领域的核心应用场景
 */
export function FinancialSolutions() {
  const [activeCard, setActiveCard] = useState<string | null>(null);

  // 解决方案配置
  const solutions = [
    {
      ...FINANCIAL_SOLUTIONS.HIGH_FREQUENCY_TRADING,
      icon: TrendingUp,
      gradient: 'from-blue-600 to-cyan-600',
      features: [
        '超低延迟消息传递',
        '高频数据处理',
        '实时风险控制',
        '毫秒级订单执行',
      ],
      metrics: [
        { label: '延迟', value: '< 1ms', icon: Clock },
        { label: '吞吐量', value: '20M+ msg/s', icon: Zap },
        { label: '可靠性', value: '99.99%', icon: CheckCircle },
      ],
    },
    {
      ...FINANCIAL_SOLUTIONS.REAL_TIME_PAYMENT,
      icon: CreditCard,
      gradient: 'from-green-600 to-emerald-600',
      features: [
        '实时支付处理',
        '多渠道支付聚合',
        '智能路由选择',
        '异常检测与恢复',
      ],
      metrics: [
        { label: '处理速度', value: '实时', icon: Zap },
        { label: '可用性', value: '99.99%', icon: CheckCircle },
        { label: '并发量', value: '100K+ TPS', icon: BarChart3 },
      ],
    },
    {
      ...FINANCIAL_SOLUTIONS.INTELLIGENT_RISK_CONTROL,
      icon: Shield,
      gradient: 'from-purple-600 to-pink-600',
      features: [
        'AI驱动风险检测',
        '实时规则引擎',
        '多维度风险评估',
        '自动化响应机制',
      ],
      metrics: [
        { label: '检测速度', value: '毫秒级', icon: Clock },
        { label: '准确率', value: '> 95%', icon: CheckCircle },
        { label: '误报率', value: '< 0.1%', icon: Shield },
      ],
    },
    {
      ...FINANCIAL_SOLUTIONS.DISTRIBUTED_LEDGER,
      icon: Database,
      gradient: 'from-orange-600 to-red-600',
      features: [
        '事件溯源架构',
        '分布式一致性',
        '智能合约支持',
        '审计追踪能力',
      ],
      metrics: [
        { label: '一致性', value: 'Strong', icon: CheckCircle },
        { label: '扩展性', value: 'Horizontal', icon: BarChart3 },
        { label: '吞吐量', value: '10K+ TPS', icon: Zap },
      ],
    },
  ];

  return (
    <section className="py-16 bg-gradient-to-b from-muted/20 to-background">
      <div className="container">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold mb-4">金融行业解决方案</h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            CActor为金融行业提供专业的高性能解决方案，
            满足严苛的性能、安全和合规要求
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
          {solutions.map(solution => {
            const Icon = solution.icon;
            const isActive = activeCard === solution.id;

            return (
              <Card
                key={solution.id}
                className={cn(
                  'group cursor-pointer transition-all duration-300 hover:shadow-xl overflow-hidden',
                  isActive && 'ring-2 ring-primary scale-[1.02]'
                )}
                onClick={() => setActiveCard(isActive ? null : solution.id)}
              >
                {/* 卡片头部 */}
                <CardHeader className="relative overflow-hidden">
                  <div
                    className={`absolute inset-0 bg-gradient-to-r ${solution.gradient} opacity-10 group-hover:opacity-20 transition-opacity`}
                  />
                  <div className="relative flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div
                        className={`p-3 rounded-lg bg-gradient-to-r ${solution.gradient} text-white`}
                      >
                        <Icon className="h-6 w-6" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">
                          {solution.title}
                        </CardTitle>
                        <p className="text-sm text-muted-foreground mt-1">
                          {solution.description}
                        </p>
                      </div>
                    </div>
                    <ArrowRight
                      className={cn(
                        'h-5 w-5 text-muted-foreground transition-transform',
                        isActive && 'rotate-90'
                      )}
                    />
                  </div>
                </CardHeader>

                <CardContent className="space-y-6">
                  {/* 核心指标 */}
                  <div className="grid grid-cols-3 gap-4">
                    {solution.metrics.map(metric => {
                      const MetricIcon = metric.icon;
                      return (
                        <div
                          key={metric.label}
                          className="text-center p-3 rounded-lg bg-muted/50"
                        >
                          <MetricIcon className="h-4 w-4 mx-auto mb-1 text-muted-foreground" />
                          <div className="text-sm font-semibold">
                            {metric.value}
                          </div>
                          <div className="text-xs text-muted-foreground">
                            {metric.label}
                          </div>
                        </div>
                      );
                    })}
                  </div>

                  {/* 展开的详细信息 */}
                  {isActive && (
                    <div className="space-y-4 animate-in slide-in-from-top-2 duration-300">
                      <div>
                        <h4 className="text-sm font-medium mb-3 text-muted-foreground">
                          核心特性：
                        </h4>
                        <div className="grid grid-cols-2 gap-2">
                          {solution.features.map((feature, featureIndex) => (
                            <div
                              key={feature}
                              className="flex items-center space-x-2 text-sm"
                              style={{
                                animationDelay: `${featureIndex * 0.1}s`,
                              }}
                            >
                              <CheckCircle className="h-3 w-3 text-green-600 flex-shrink-0" />
                              <span>{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* 技术优势 */}
                      <div className="p-4 rounded-lg bg-gradient-to-r from-muted/50 to-muted/30">
                        <h4 className="text-sm font-medium mb-2">
                          CActor技术优势：
                        </h4>
                        <p className="text-sm text-muted-foreground">
                          {getTechnicalAdvantage(solution.id)}
                        </p>
                      </div>

                      {/* 行动按钮 */}
                      <div className="flex space-x-3">
                        <Button size="sm" className="flex-1">
                          了解详情
                        </Button>
                        <Button size="sm" variant="outline" className="flex-1">
                          查看案例
                        </Button>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* 底部CTA */}
        <div className="text-center mt-12">
          <div className="inline-flex items-center space-x-4 p-6 rounded-xl bg-gradient-to-r from-primary/10 to-purple-500/10 border">
            <div className="text-left">
              <h3 className="font-semibold mb-1">需要定制化金融解决方案？</h3>
              <p className="text-sm text-muted-foreground">
                我们的专家团队为您提供专业咨询和技术支持
              </p>
            </div>
            <Button>
              联系我们
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/**
 * 获取技术优势描述
 */
function getTechnicalAdvantage(solutionId: string): string {
  const advantages = {
    hft: '基于Actor模型的无锁并发设计，配合7层架构的优化，实现极致的低延迟和高吞吐量，满足高频交易的严苛要求。',
    payment:
      '事件驱动的异步处理模式，结合智能路由和故障恢复机制，确保支付处理的实时性和可靠性。',
    risk: '流式处理架构支持实时数据分析，AI模型无缝集成，提供毫秒级的风险检测和响应能力。',
    ledger:
      '事件溯源模式天然支持审计追踪，分布式一致性算法确保数据完整性，满足金融合规要求。',
  };

  return advantages[solutionId as keyof typeof advantages] || '';
}
